<template>
  <div id="detail">
    <detail-nav-bar @titleClick="titleClick" ref="nav"/>
    <scroll class="content" ref="scroll" :probe-type="3" @scroll="contentScroll">
      <detail-swiper :top-images="topImages"/>
      <detail-base-info :playlist="playlist"/>
      <detail-shop-info :creator="creator"/>
      <detail-goods-info :tracks="tracks" @goodsInfoImageLoad="goodsInfoImageLoad"/>
      <detail-param-info :tracks="tracks" ref="param"/>
      <detail-comment-info :comments="comments" ref="comment"/>
      <goods-list :goods="recommends" class="goods-list" ref="recommend"/>
    </scroll>
    <detail-bottom-bar @addToCart="addToCart"/>
    <back-top @click.native="backTopClick" v-show="isShowBackTop"/>
    <!-- <toast :msg="msg" :show="show"/> -->
  </div>
</template>

<script>
  import DetailNavBar from './childComps/DetailNavBar.vue'
  import DetailSwiper from './childComps/DetailSwiper.vue'
  import DetailBaseInfo from './childComps/DetailBaseInfo.vue'
  import DetailShopInfo from './childComps/DetailShopInfo.vue'
  import DetailGoodsInfo from './childComps/DetailGoodsInfo.vue'
  import DetailParamInfo from './childComps/DetailParamInfo.vue'
  import DetailCommentInfo from './childComps/DetailCommentInfo.vue'
  import DetailBottomBar from './childComps/DetailBottomBar'

  import Scroll from 'components/common/scroll/Scroll'
  // import Toast from 'components/common/toast/Toast'

  import GoodsList from 'components/content/goods/GoodsList'

  import {getDetail, getComments, getRecommends, PlayList, Creator} from 'network/detail'

  import {debounce} from 'common/utils'
  import {backTopMixin} from 'common/mixin'

  import {mapActions} from 'vuex'

  export default {
    name: 'Detail',
    components: {
      DetailNavBar,
      DetailSwiper,
      DetailBaseInfo,
      DetailShopInfo,
      DetailGoodsInfo,
      DetailParamInfo,
      DetailCommentInfo,
      DetailBottomBar,

      Scroll,
      // Toast,

      GoodsList
    },
    mixins: [backTopMixin],
    data() {
      return {
        id: null,
        topImages: [],
        playlist: {},
        creator: {},
        tracks: [],
        comments: [],
        recommends: [],
        themeTopYs: [],
        getThemeTopY: null,
        currentIndex: 0,
        /* msg: '',
        show: false */
      }
    },
    methods: {
      // 映射vuex里的actions
      ...mapActions(['addCart']),
      // 方法
      // 点击顶部导航栏
      titleClick(i) {
        // console.log(i);
        /* switch(i) {
          case 0: this.themeTopYs[0] = 0; break;
          case 1: this.themeTopYs[1] = this.$refs.param.$el.offsetTop; break;
          case 2: this.themeTopYs[2] = this.$refs.comment.$el.offsetTop; break;
          case 3: this.themeTopYs[3] = this.$refs.recommend.$el.offsetTop; break;
        } */
        this.$refs.scroll.scrollTo(0, -this.themeTopYs[i], 200)
      },
      // 监听商品信息图片加载，加载完成，获取各部分offsetTop
      goodsInfoImageLoad() {
        this.getThemeTopY()
      },
      // 监听滚动位置
      contentScroll(position) {
        // console.log(position);
        // 1.获取y值
        const positionY = -position.y

        // 2.positionY和themeTopYs中的值进行对比
        let length = this.themeTopYs.length
        for (let i = 0; i < length - 1; i++) {
          // console.log(i);
          // 第一种方法
          /* if (this.currentIndex !== i && ((i < length - 1 && positionY >= this.themeTopYs[i] && positionY < this.themeTopYs[i + 1]) || (i === length - 1 && positionY >= this.themeTopYs[i]))) {
            this.currentIndex = i
            // console.log(this.currentIndex);
            this.$refs.nav.currentIndex = this.currentIndex
          } */

          // 第二种方法
          if (this.currentIndex !== i && (positionY >= this.themeTopYs[i] && positionY < this.themeTopYs[i + 1])) {
            this.currentIndex = i
            this.$refs.nav.currentIndex = this.currentIndex
          }
        }

        // 监听是否显示BackTop
        this.listenShowBackTop(position)
      },
      // 添加到购物车
      addToCart() {
        // 1. 获取购物车需要展示的信息
        const product = {}
        product.id = this.id
        product.image = this.topImages[0]
        product.name = this.playlist.name
        product.description = this.playlist.description
        product.playCount = this.playlist.playCount

        // 2. 将商品添加到购物车里面(1. Promise  2. mapActions)
        this.addCart(product).then(res => {
          // 3. 添加成功后 显示添加成功的Toast
          // console.log(res);
          /* this.show = true  
          this.msg = res

          setTimeout(() => {
            this.show = false
            this.msg = ''
          }, 1500) */
          // console.log(this.$toast);
          this.$toast.show(res)
        })
        /* this.$store.dispatch('addCart', product).then(res => {
          // 3. 添加成功后 显示添加成功的Toast
          console.log(res);
        }) */
      },

      // 网络请求方法
      getDetail(id) {
        // 2. 根据id请求详情数据
        getDetail(id).then(res => {
          // console.log(res);
          const data = res.playlist
          // 1. 获取顶部轮播图片
          this.topImages.push(data.coverImgUrl)
          // console.log(this.topImages);

          // 2. 获取歌单信息
          this.playlist = new PlayList(data)

          // 3. 获取创建者信息
          this.creator = new Creator(data.creator)

          // 4. 获取歌单内歌曲信息
          this.tracks = data.tracks 
        })
      },
      // 获取评论
      getComments(id) {
        // 5. 根据歌单id获取歌单评论信息
        getComments(id).then(res => {
          // console.log(res);
          this.comments = res.comments
          /* this.$nextTick(() => {
            this.themeTopYs.push(0)
            this.themeTopYs.push(this.$refs.param.$el.offsetTop-44)
            this.themeTopYs.push(this.$refs.comment.$el.offsetTop-44)
            this.themeTopYs.push(this.$refs.recommend.$el.offsetTop-44)
            console.log(this.themeTopYs);
          }) */
        })
      },
      // 获取推荐歌单
      getRecommends() {
        // 6. 获取推荐歌单
        getRecommends().then(res => {
          // console.log(res);
          this.recommends = res.result
        })
      }
    },
    created() {
      // 1. 保存传入的id
      this.id = this.$route.query.id
      // console.log(this.id);

      // 2. 获取详细信息
      this.getDetail(this.id)
      
      // 3. 获取评论
      this.getComments(this.id)

      // 4. 获取推荐歌单
      this.getRecommends()

      // 为获取各部分offsetTop添加防抖函数
      this.getThemeTopY = debounce(() => {
        this.themeTopYs = []
        this.themeTopYs.push(0)
        this.themeTopYs.push(this.$refs.param.$el.offsetTop - 44)
        this.themeTopYs.push(this.$refs.comment.$el.offsetTop - 44)
        this.themeTopYs.push(this.$refs.recommend.$el.offsetTop - 44)
        this.themeTopYs.push(Number.MAX_VALUE)
        // console.log(this.themeTopYs);
      }, 100)
    },
    /* updated() {
      this.themeTopYs = []
      this.themeTopYs.push(0)
      this.themeTopYs.push(this.$refs.param.$el.offsetTop)
      this.themeTopYs.push(this.$refs.comment.$el.offsetTop)
      this.themeTopYs.push(this.$refs.recommend.$el.offsetTop)
      console.log(this.themeTopYs);
    } */
  }
</script>

<style scoped>
  #detail {
    height: 100vh;
    position: relative;
    z-index: 9;
    background-color: #fff;
  }

  .content {
    height: calc(100% - 44px - 49px);
    overflow: hidden;
  }

  .goods-list {
    padding-top: 20px;
  }
</style>